<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">
        <span>房间状态:</span>
        <el-select v-model="statusValue" placeholder="请选择" @change="statusChange">
        <el-option
          v-for="item in roomStatusList"
          :key="item.dictKey"
          :label="item.dictText"
          :value="item.dictKey">
        </el-option>
      </el-select>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span>房间类型:</span>
        <el-select v-model="roomTypeValue" placeholder="请选择" @change="roomTypeChange">
          <el-option
            v-for="item in roomTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span>所属城市:</span>
        <el-select v-model="cityValue" placeholder="请选择" @change="cityChange">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">
        <span>所属酒店:</span>
        <el-select v-model="hotelValue" placeholder="请选择" @change="hotelChange">
          <el-option
            v-for="item in hotelList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div></el-col>
    </el-row>
     <br>
    <el-button type="primary" icon="el-icon-lx-add"  @click="dialogVisible = true">新建</el-button>
    <el-button type="primary" icon="el-icon-lx-add"  @click="flash">刷新</el-button>
    <el-button type="primary" icon="el-icon-lx-add"   @click="exportRoom">导出数据</el-button>



    <el-dialog
      :modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="addRoom" :rules="rules" :model="addRoom" label-width="100px" >
        <el-form-item label="房间类型:" prop="roomTypeId">
          <el-select v-model="addRoom.roomTypeId" placeholder="请选择" @change="getRoomtype">
            <el-option
              v-for="item in roomTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属城市:" prop="cityId">
          <el-select v-model="addRoom.cityId" placeholder="请选择" @change="getHotelSelect">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属酒店:" prop="hotelId">
          <el-select v-model="addRoom.hotelId" placeholder="请选择" >
            <el-option
              v-for="item in form.hotelList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属楼层:" prop="floorId">
          <el-select v-model="addRoom.floorId" placeholder="请选择">
            <el-option
              v-for="item in floorList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房间号码:" prop="number">
          <el-input v-model="addRoom.number"></el-input>
        </el-form-item>

        <el-form-item label="座机号码:" prop="roomTel">
          <el-input v-model="addRoom.roomTel"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="saveRoom('addRoom')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
    <br>
    <br>
  <el-table
    :data="roomList"
    border
  >
    <el-table-column
      fixed
      prop="id"
      label="编号"
      >
    </el-table-column>
    <el-table-column
      prop="cityName"
      label="所在城市"
      >
    </el-table-column>
    <el-table-column
      prop="hotelName"
      label="酒店名称"
     >
    </el-table-column>
    <el-table-column
      prop="number"
      label="房间号码"
      >
    </el-table-column>
    <el-table-column
      prop="roomTypeName"
      label="房间类型"
     >
    </el-table-column>
    <el-table-column
      prop="statusText"
      label="状态"
     >
    </el-table-column>
    <el-table-column
      prop="roomTel"
      label="房间电话号码"
    >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="getRoomView(scope.row)"   size="small">查看</el-button>
        <el-button type="danger" size="small"  @click="removeRoom(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-dialog
      title="提示"
      :visible.sync="viewDisable"
      width="30%"
      :modal="false"
      :before-close="handleClose">
      <el-form ref="addRoom" :model="form" label-width="80px">
        <el-form-item label="房间类型:">
          <el-select v-model="viewRoom.roomtypeId" placeholder="请选择" @change="getRoomtype" v-bind:disabled="canEdit">
            <el-option
              v-for="item in roomTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房间状态:">
        <el-select v-model="viewRoom.status" placeholder="请选择" v-bind:disabled="canEdit" >
          <el-option
            v-for="item in roomStatusList"
            :key="item.dictKey"
            :label="item.dictText"
            :value="item.dictKey">
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="所在城市:">
          <el-select v-model="viewRoom.cityId" placeholder="请选择" @change="getHotelSelect" v-bind:disabled="canEdit">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所在酒店:">
          <el-select v-model="viewRoom.hotelId" placeholder="请选择" v-bind:disabled="canEdit">
            <el-option
              v-for="item in hotelList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属楼层:">
          <el-select v-model="viewRoom.floorId" placeholder="请选择" v-bind:disabled="canEdit">
            <el-option
              v-for="item in floorList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="房间号码:">
          <el-input v-model="viewRoom.number" v-bind:disabled="canEdit"></el-input>
        </el-form-item>

        <el-form-item label="座机号码:">
          <el-input v-model="viewRoom.roomTel" v-bind:disabled="canEdit"></el-input>
        </el-form-item>


      </el-form>
    <el-button @click="toEdit()" v-show="isView">编 辑</el-button>
    <el-button type="primary" v-show="isEdit" @click="modRoom()">保 存</el-button>
    </el-dialog>
    <br>


  <el-pagination
    background
    layout="prev, pager, next"
    :current-page="currentPage"
    :page-size="size"
    :total="total"
    @current-change="searchRoom">
  </el-pagination>

    </div>

</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        alert(row.id);
      }
    },

    data() {
      return {
        isView:true,
        isEdit:false,
        canEdit:true,
        total:0,
        pages:1,
        size:10,
        currentPage:1,
        viewRoom:{

        },
        addRoom: {
          id:'',
          cityId:'',
          floorId:'',
          hotelId:'',
          roomTypeId:'',
          number:'',
          roomTel:''
        },
        rules: {
          roomTypeId:[
        {
          required: true,
          message: '请选择房间类型',
          trigger: 'change'
        },
      ],
          cityId: [
            {
              required: true,
              message: '请选择城市',
              trigger: 'change'
            },
          ],
          hotelId: [
            {
              required: true,
              message: '请选择酒店',
              trigger: 'change'
            }
          ],
          floorId: [
            {
              required: true,
              message: '请选择楼层',
              trigger: 'change'
            }
          ],
          number:[
            {
              required: true,
              message: '请填写房间号码',
              trigger: 'blur'
            }
          ]

        },
        viewDisable:false,
        dialogVisible: false,

        statusValue:'',
        roomTypeValue:'',
        cityValue:'',
        hotelValue:'',
        roomStatusList:[],
        roomTypeList:[],
        cityList:[],
        hotelList:[],
        floorList:[],
        roomList:[],
        cityId:'',
        hotelId:'',
        statusKey:'',

        roomTypeId:'',
        form:{
          hotelList:[]
        }
      }
    },
    created () {
      var _this = this;
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/room/search').then(function (res) {
        if(res.data.code==80200){
          _this.roomList = res.data.data.records;
          _this.total = res.data.data.total;
          _this.pages = res.data.data.pages;
          _this.size = res.data.data.size;
          _this.currentPage = res.data.data.current;
        }
      })
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/floorlist').then(function (res) {
        if(res.data.code==80200){
          _this.floorList = res.data.data;
        }
      })
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/hotellist').then(function (res) {
        if(res.data.code==80200){
          _this.hotelList = res.data.data;
        }
      })
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/listByDictName?dictName=hotelRoomStatus').then(function (res) {
        if(res.data.code==80200){
          _this.roomStatusList = res.data.data;
        }
      })

      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/roomTypelist').then(function (res) {
        if(res.data.code==80200){
          _this.roomTypeList = res.data.data;
        }
      })
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/citylist').then(function (res) {
        if(res.data.code==80200){
          _this.cityList = res.data.data;
        }
      })
    },
    methods: {
      exportRoom(){
        window.location.href = 'http://8.135.35.123:9000/hotelsystem/room/export?status=' + this.statusKey
        +'&cityId=' + this.cityId
        +'&hotelId=' + this.hotelId
        +'&roomTypeId=' + this.roomTypeId
      },
      removeRoom(row){
        this.$http.post('http://8.135.35.123:9000/hotelsystem/room/remove?id='+row.id).then(function (res) {
          if (res.data.code == 80200) {
            alert(res.data.msg);
            location.reload();
          }else{
            alert(res.data.msg);
          }
        })
      },
      toEdit(){
        this.canEdit = false;
        this.isEdit = true;
        this.isView = false;
      },
      flash(){
        location.reload();
      },
      modRoom(){
        var vo = new URLSearchParams()
        vo.append('id', this.viewRoom.id);
        vo.append('number', this.viewRoom.number);
        vo.append('roomTel', this.viewRoom.roomTel);
        vo.append('floorId', this.viewRoom.floorId);
        vo.append('cityId', this.viewRoom.cityId);
        vo.append('hotelId', this.viewRoom.hotelId);
        vo.append('roomtypeId', this.viewRoom.roomtypeId);
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/room/mod',vo).then(function (res) {
          if (res.data.code == 80200) {
            alert(res.data.msg);
            location.reload();
          }else{
            alert(res.data.msg);
          }
        })
      },
      getRoomView(row){
        this.viewDisable = true;
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/room/view?id='+row.id).then(function (res) {
          if (res.data.code == 80200) {
            _this.viewRoom = res.data.data;
            console.log(_this.viewRoom)
          }else{
            alert(res.data.msg);
          }
        })
      },
      saveRoom(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var vo = new URLSearchParams()
            vo.append('number', this.addRoom.number);
            vo.append('roomTel', this.addRoom.roomTel);
            vo.append('floorId', this.addRoom.floorId);
            vo.append('cityId', this.addRoom.cityId);
            vo.append('hotelId', this.addRoom.hotelId);
            vo.append('roomtypeId', this.addRoom.roomTypeId);
            var _this = this;
            _this.$http.post('http://8.135.35.123:9000/hotelsystem/room/add',vo).then(function (res) {
              if (res.data.code == 80200) {
                alert(res.data.msg);
                location.reload();
              } else {
                alert(res.data.msg);
              }
            })
          }else {

          }
        })
      },
      getHotelSelect(val){
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/hotellist?cityId=' + val).then(function (res) {
          if (res.data.code == 80200) {
            _this.form.hotelList = res.data.data;
          } else {
            alert(res.data.msg);
          }
        })
      },
      cityChange (val) {
        this.cityId = val;
        this.searchRoom(1);
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/hotellist?cityId=' + val).then(function (res) {
          if (res.data.code == 80200) {
            _this.hotelList = res.data.data;
          } else {
            alert(res.data.msg);
          }
        })
      },
      hotelChange (val) {
        this.hotelId = val;
        this.searchRoom(1);
      },
      statusChange(val){
        this.statusKey = val;
        this.searchRoom(1);
      },
      roomTypeChange(val){
        this.roomTypeId = val;
        this.searchRoom(1);
      },
      searchRoom(currentPage){
        var vo = new URLSearchParams()
        vo.append('currentPage', currentPage);
        vo.append('status', this.statusKey);
        vo.append('cityId', this.cityId);
        vo.append('hotelId', this.hotelId);
        vo.append('roomTypeId', this.roomTypeId);
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/room/search',vo).then(function (res) {
          if (res.data.code == 80200) {
            _this.roomList = res.data.data.records;
            _this.total = res.data.data.total;
            _this.pages = res.data.data.pages;
            _this.size = res.data.data.size;
            _this.currentPage = res.data.data.current;
            console.log(res)
          } else {
            alert(res.data.msg);
          }
        })
      }
    }
  }
</script>
<style>
  .el-pagination {
    text-align: center;
  }
</style>
